import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Table,
  Button,
  Divider,
  Descriptions,
  Tooltip,
} from 'antd';

import '@ant-design/compatible/assets/index.css';
import { TableListItem } from './data';
import SaveAndUpdateElem from './components/SaveAndUpdateElem';

const { Item } = Descriptions;

interface DiscountProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  loading: boolean;
  detailInfo: any;
  dataInfo: any;
  discountDetailInfo: any;
  location: { query: any };
  INITINFO: any;
}

interface DiscountState {
  pageIndex: number;
  pageSize: number;
  visible: boolean;
  from: string;
  rowId:number;
}

function mapStateToProps(state: any) {
  const {
    VIPUserManagementDiscount: { detailInfo, dataInfo, discountDetailInfo },
    common: { INITINFO },
  } = state;
  return {
    detailInfo,
    dataInfo,
    discountDetailInfo,
    INITINFO,
  };
}

@connect(mapStateToProps)
class DiscountElem extends Component<DiscountProps, DiscountState> {
  state: DiscountState = {
    pageIndex: 1,
    pageSize: 20,
    visible: false,
    from: '',
    rowId: 0,
  };

  componentDidMount() {
    const { pageIndex, pageSize } = this.state;
    const { location: { query: { id } } } = this.props;
    if (id) {
      this.fetchDataInfo(id);
      const params = {
        vipId: id,
        pageIndex,
        pageSize,
      };
      this.fetchAction('fetchDiscountList', params);
    }
  }

  componentDidUpdate(props: any) {
    const { location: { query: { id } } } = this.props;
    if (id && id !== props.location.query.id) this.fetchDataInfo(id);
  }

  columns: any = () => {
    const { pageIndex } = this.state;
    return [
      {
        title: '序号',
        dataIndex: 'id',
        width: 80,
        render: (texta: any, record: any, index: any) => (
          <div key={texta}>
            <span>{(pageIndex - 1) * 10 + (index + 1)}</span>
          </div>
        ),
      },
      {
        title: '公司名称',
        dataIndex: 'name',
        width: 150,
        render: (text: string, record: any) => (
          <Tooltip title={text}>
            <div
              className="wordOmit nameLink"
              onClick={() => this.handleShowModal(true, record, 'detail')}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '结算周期',
        dataIndex: 'settleCycleName',
        width: 100,
        render: (text: string) => (
          <Tooltip title={text}>
            <div className="wordOmit">{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '结算类型',
        dataIndex: 'settleTypeName',
        width: 100,
        render: (text: string) => (
          <Tooltip title={text}>
            <div className="wordOmit">{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '有效期',
        dataIndex: 'timeTxt',
        width: 150,
      },
      { title: '状态', dataIndex: 'statusName', width: 60 },
      { title: '修改人', dataIndex: 'updateUserName', width: 100 },
      {
        title: '修改时间',
        dataIndex: 'updateTime',
        width: 180,
      },
      { title: '创建人', dataIndex: 'createUserName', width: 100 },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 180,
      },
      {
        title: '操作',
        width: 120,
        render: (text: any, record: any) => (
          <div>
            <span className="operLink" onClick={() => this.handleShowModal(true, record)}>
              编辑
            </span>
            <Divider type="vertical" />
            <span className="operLink" onClick={() => this.handleShowModal(true, record, 'detail')}>
              详情
            </span>
          </div>
        ),
      },
    ];
  };

  fetchDataInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'VIPUserManagementDiscount/fetch',
      payload: { id, loadUser: 1 },
    });
  };


  onSelectChange = (pageIndex: number, pageSize: number) => {
    this.setState({ pageIndex, pageSize }, () => {
      const {
        location: {
          query: { id: vipId },
        },
      } = this.props;
      const params = { vipId, pageIndex, pageSize };
      this.fetchAction('fetchDiscountList', params);
    });
  };

  handleShowModal = (status: boolean, record?: TableListItem, from?: any) => {
    this.setState({
      from: from || {},
      visible: status,
    });
    if (record) {
      const { id: confId } = record;
      this.fetchAction('fetchDiscountDetail', { confId });
    }
  };

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    dispatch({
      type: `VIPUserManagementDiscount/${typeName}`,
      payload,
    });
  };

  render() {
    const {
      pageIndex,
      pageSize,
      visible,
      from,
    } = this.state;

    const {
      detailInfo,
      dataInfo,
      discountDetailInfo,
      loading,
    } = this.props;

    const dataSource = dataInfo.list || [];

    const pagination: object = dataInfo
      ? {
        total: dataInfo.count,
        current: pageIndex,
        pageSize,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: () => `共${dataInfo.count || 0}条数据`,
        onChange: this.onSelectChange,
        onShowSizeChange: this.onSelectChange,
      }
      : {};

    return (
      <Fragment>
        <PageHeader />

        <Card bordered={false} className="searchForm">
          <Descriptions>
            <Item label="商户名称">{detailInfo.name}</Item>
            <Item label="VIP编号">{detailInfo.vipCode}</Item>
            <Item label="商户ID">{detailInfo.id}</Item>
            <Item label="　联系人">{detailInfo.contact}</Item>
            <Item label="手机号">{detailInfo.phone}</Item>
          </Descriptions>
        </Card>

        <Card bordered={false} className="tableList">
          <div className="tableBtns">
            <Button
              className="smallButton"
              type="primary"
              size="small"
              onClick={() => this.handleShowModal(true)}
            >
              添加
            </Button>
          </div>

          <Table
            className="statementTable tableHeight60"
            rowKey="id"
            tableLayout="fixed"
            loading={loading}
            columns={this.columns()}
            dataSource={dataSource}
            pagination={pagination}
            scroll={{ x: 1400 }}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
          />

          <SaveAndUpdateElem
            id={detailInfo.id}
            detail={discountDetailInfo}
            From={from}
            visible={visible}
            fetchAction={this.fetchAction}
            showModal={this.handleShowModal.bind(this)}
          />
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<DiscountProps>()(DiscountElem);
